React Server Components

3種類のcomponents

demo

使い分け

参考

めちゃくちゃわかりやすいまとめ

test

test

内部とか再実装とか

混在できる

https://gyazo.com/2850e976ec3c953e761c3e72b5ecc700 https://beta.nextjs.org/docs/rendering/fundamentals

https://www.youtube.com/watch?v=TQQPAU21ZUw

https://youtu.be/4Jfv4R-yeYY?t=986

Server & Clientから透過的に使えるライブラリ

なにするの？

★この複数概念をこの軸で整理しておきたい

cache機構複数ある

fetchの仕方も複数ある

prismaチョクで呼ぶやつ

revalidate複数ある

export const revalidate = 20

pathごとにrevalidate?

nextで入れ子にしてるのが前提になる？

重い処理だったら？

終わった後にrevalidate

revalidateTag

もうちょい狭い範囲

サーバーに新しいリクエストを行い、データリクエストを再取得し、Server Componentを再レンダリングする。

クライアントは、影響を受けていないクライアント側のReact（useStateなど）やブラウザの状態（スクロール位置など）を失うことなく、更新されたReact Server Componentのペイロードをマージすることができます。

気持ちまとめ

trpcもreact-queryも不要

APIエンドポイントを作る代わりに

server componentだったいr，

server actions

をつかう感じになる

presentational的な

モノレポの場合

モノレポでない場合

メリットは有る

メリデメ

bundle sizeは小さくなる

諸々の概念はRSCが軸にある

疑問

直接書いた時にキャッシュされる？

code:TS

async function UserData() {

const data = await prisma.user.getInfo()

return <div>user: {data.username}</div>

}

毎回fetchされる？

意図せず危険なコードを書ける？

キャッシュ周り

user id単位でキャッシュできないと危なそう

秘匿情報周り

'use client'

bundle時にclientとserverの境界を見つけるために使う

「clientだからつける」ってわけではない

引数に関数を持てなくなる

代わりにimport client-onlyとか使えばいい

npmの仕組みを使ってる

じょうけんつきexport的な

error.jsが返る

'use server'